<template>
  <div>
    <!-- 对象语法 -->
    <div :class="{ item1: true }"></div>
    <div :class="{ item1: haveClass }"></div>
    <!-- 数组语法 -->
    <div :class="['item1']"></div>
    <div :class="['item' + classNum]"></div>
    <!-- 数组嵌套 -->
    <div :class="[{ item1: true }]"></div>
    <div
      :style="{
        height: '100px',
        width: '100px',
        background: 'red',
        margin: '5px',
      }"
    ></div>
    <div :style="[myStyle]"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      haveClass: true,
      classNum: 1,
      myStyle: {
        height: "100px",
        width: "100px",
        background: "red",
        margin: "5px",
      },
    };
  },
  methods: {},
};
</script>

<style scoped>
.item1 {
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px;
}
</style>